<template>
  <div class="hello">
      {{msg}}
      {{1+10}}
      {{"我是字符串"}}
      {{0>5?"true":"false"}}

      <!-- 指令 -->
      <!-- 可以解析标签 -->
      <p v-html="msg"></p>
      <!-- 字符串输出 -->
      <p v-text="msg"></p>

      <span class="red">我是红色</span>
      <span v-bind:title="ts">提示</span>

      <div>
        <p v-if="show">我是if看见的</p>
        <p v-else="show">我是else看见的</p>
      </div>

      <div v-show="show">我是v-show</div>


      <!-- 列表循环 -->
      <div>
        <ul>
          <li v-for="(name,index) in names" v-bind:key="index">{{name}}-{{index}}</li>
        </ul>

        <ul>
          <li v-for="user in users">
            <span>{{user.name}}</span>
            <span>{{user.age}}</span>
          </li>
        </ul>
      </div>

      <!-- 时间监听 -->
      <div>
        <button v-on:click="num+=1">+1</button>
        <p>{{num}}</p>
      </div>

      <button v-on:click="handlerClick">点击事件</button>  
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '<p color = "red">Hello Vue</p>',
      ts: '我是提示',
      show: true,
      names: ['张三','李四','王五'],
      users:[
        {
         id:1,
         name:"jack",
         age:20
        },
         {
         id:2,
         name:"sam",
         age:200
         },
         {
         id:3,
         name:"mark",
         age:2000
         }
          ],
        num:1
    }
  },

  methods: {
    handlerClick(){
     //this代表当前data中的数据
     this.show = !this.show;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.red {
  color: red;
}
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
